<template>
  <div class="leftwrap">
    <div class="leftcwrap">
      <div class="leftbox usermenuBox">
        <el-row class="tac">
          <el-col :span="24">
            <el-menu
              :default-active="defaultActive"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              text-color="#666" router
              active-text-color="#2e4fbd"
              :unique-opened="true"  :default-openeds="openeds"
              :collapse-transition="true">
              <div v-for="(item, index) in menuItems" :key="index">
                <el-submenu class="moreMenuWrap" v-if="item.children" :name="index" :index="String(index)">
                  <template slot="title">
                    <div class="ripple menuItemsBox">
                      <span class="iconbox">
                        <span :class="setclass(item.icon)"></span>
                      </span>
                      <span>{{item.text}}</span>
                    </div>
                  </template>
                  <el-menu-item-group v-for="(subItem, i) in item.children" :key="index + i">
                    <el-menu-item class="moreMenuItem" :index="subItem.name">
                      <div>{{subItem.text}}</div>
                    </el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
                <el-menu-item class="ripple" v-else :name="item.name" :index="item.name">
                  <div class="onlyOneMenuBox">
                    <span class="iconbox">
                      <span :class="setclass(item.icon)"></span>
                    </span>
                    <span slot="title">{{item.text}}</span>
                  </div>
                </el-menu-item>
              </div>
            </el-menu>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LeftMenu',
  data () {
    return {
      openeds: []
    }
  },
  methods: {
    handleOpen (key, keyPath) {
      //  console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      //  console.log(key, keyPath)
    },
    // 动态class改换icon图标
    setclass (a) {
      return 'iconfont icon-' + a
    }
  },
  computed: {
    // 菜单栏
    menuItems () {
      return this.$store.state.menuItems
    },
    //  获取当前路由渲染页面菜单
    defaultActive () {
      let pathLength = this.$route.path.slice(1).split('/')[0]
      if (pathLength === 'roleManage') {
        let path = this.$route.path.split('/').reverse()[0]
        return path
      } else if (pathLength === 'menuConfig') {
        let path = 'roleManage'
        return path
      } else if (pathLength === 'accountManage') {
        let path = 'accountManage'
        return path
      } else if (pathLength === 'addingGoods') {
        let path = 'addingGoods'
        return path
      } else if (pathLength === 'goodsList') {
        let path = 'goodsList'
        return path
      } else if (pathLength === 'goodDetail') {
        let path = 'goodsList'
        return path
      } else if (pathLength === 'codeManagement') {
        let path = 'codeManagement'
        return path
      } else if (pathLength === 'cmDetail') {
        let path = 'codeManagement'
        return path
      } else if (pathLength === 'fleeingGoods') {
        let path = 'fleeingGoods'
        return path
      } else if (pathLength === 'codeDetail') {
        let path = 'fleeingGoods'
        return path
      } else if (pathLength === 'menuManage') {
        let path = 'menuManage'
        return path
      }
    }
  }
}
</script>

<style lang="stylus">
@import '~styles/varibles.styl'
.usermenuBox .el-submenu__title {
  height: 59px;
  line-height: 58px;
  font-size: 14px;
  color: #666666;
  padding: 0!important;
}
.usermenuBox .el-submenu__title:hover {
  color: #333333!important;
  background-color: transparent;
}
.usermenuBox .el-submenu__title:focus {
  color: #333333!important;
  background-color: transparent;
}
.moreMenuWrap .el-menu-item-group__title {
  padding: 0!important;
}
.el-submenu__title i{
  color: #666666!important;
  transition: all 0.3s ease-in-out;
}
.usermenuBox .el-submenu__title:hover i {
  color: #333333!important;
}
</style>
<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.usermenuBox .onlyOneMenuBox {
  display: block;
  position: relative;
  line-height: 35px;
  border-left: 3px solid transparent;
  padding-left: 49px;
  font-size: 14px;
  color: #666;
  width: 100%;
  box-sizing: border-box;
}
.usermenuBox .iconbox .iconfont {
  font-size: 18px;
  color: #cbd1e7!important;
  transition: all .3s ease-in-out;
}
.usermenuBox .menuItemsBox{
  border-left: 3px solid transparent;
  box-sizing: border-box;
  position: relative;
  font-size: 14px;
  color: #666;
  padding-left: 49px;
  line-height: 58px;
  cursor: pointer;
  box-shadow: none;
  user-select: none;
}
.usermenuBox .iconbox{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  line-height: 20px;
  position: absolute;
  left: 16px;
  top: 7px;
  font-size: 0;
}
.usermenuBox .menuItemsBox .iconbox{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  line-height: 20px;
  position: absolute;
  left: 16px;
  top: 19px;
  font-size: 0;
}
.usermenuBox .el-submenu__title:hover, .usermenuBox .el-submenu__title:hover i, .usermenuBox .el-submenu__title:hover span {
  color: #333333!important;
}
.usermenuBox .el-menu {
  border-right: 0;
}
.usermenuBox li.el-submenu {
  border-bottom: 1px solid #e4e4e4;
  line-height: 40px;
  background-color: #fff;
  box-sizing: border-box;
  font-size: 14px;
  color: #666;
  padding: 0!important;
}
.usermenuBox .el-submenu__title {
  height: 59px;
  line-height: 58px;
  font-size: 14px;
  color: #666666;
  padding: 0!important;
}
.usermenuBox .el-submenu__title:hover {
  color: #333333!important;
  background-color: transparent;
}
.usermenuBox .el-submenu__title:focus {
  color: #333333!important;
  background-color: transparent;
}
.usermenuBox .el-menu-item {
  border-bottom: 1px solid #e4e4e4;
  height: 59px;
  line-height: 35px;
  position: relative;
  overflow: hidden;
  transform: translate3d(0,0,0);
  box-sizing: border-box;
  font-size: 0;
  color: #666;
  width: 100%;
  padding: 11px 0 0;
  padding-left: 0!important;
  overflow: hidden;
}
.usermenuBox .el-menu-item:hover {
  color: #333333!important;
  background-color: transparent;
}
.usermenuBox .el-menu-item:focus {
  color: #333333!important;
  background-color: transparent;
}
.usermenuBox .el-menu-item:hover .onlyOneMenuBox .iconbox .iconfont, .usermenuBox .el-menu-item:focus .onlyOneMenuBox .iconbox .iconfont, .usermenuBox .el-menu-item:hover span, .usermenuBox .el-menu-item:focus span{
  color: #333333!important;
}
.usermenuBox .el-menu-item.is-active .onlyOneMenuBox .iconbox .iconfont {
  color: $baseColor!important;
}
.usermenuBox .el-menu-item.is-active .onlyOneMenuBox{
  font-size: 14px;
  border-left: 3px solid $baseColor;
  color: $baseColor!important;
}
.usermenuBox .el-menu-item.is-active .onlyOneMenuBox span {
  color: $baseColor!important;
}
.usermenuBox ul[role="menu"] .el-menu-item {
  display: block;
  width: 100%;
  min-width: 180px;
  line-height: 18px;
  min-height: 40px;
  box-sizing: border-box;
  box-sizing: border-box;
  font-size: 14px;
  border-bottom: 0;
  height: auto;
  padding: 11px 0!important;
}
.usermenuBox ul[role="menu"] .el-menu-item div {
  color: #666666;
  font-size: 14px;
  display: block;
  line-height: 18px;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  border-left: 3px solid transparent;
  padding-left: 49px;
}
.usermenuBox ul[role="menu"] .el-menu-item div:hover {
  color: #333333;
}
.usermenuBox ul[role="menu"] .is-active div {
  color: $baseColor;
  font-size: 14px;
  display: block;
  line-height: 18px;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  border-left: 3px solid $baseColor;
  padding-left: 49px;
}
.usermenuBox ul[role="menu"] .is-active div:hover {
  color: $baseColor;
}
.usermenuBox ul[role="menu"] .el-menu-item-group .el-menu-item-group__title {
  height: 0;
  padding: 0!important;
}
.usermenuBox ul[role="menu"] .el-menu-item-group:last-child {
  margin-bottom: 14px;
}
.usermenuBox ul[role="menu"] .el-menu-item-group:first-child {
  padding-top: 11px;
  border-top: 1px solid #e4e4e4;
}
.usermenuBox .el-submenu__title i{
  color: #cbcbcb!important;
  font-size: 18px!important;
  right: 18px!important;
}
</style>
<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.leftwrap
  background-color $bgCfff
  width 180px
  position absolute
  z-index 2
  top 0
  left 0
  height 100%
  box-sizing border-box
  padding-top 70px
  overflow hidden
.leftcwrap
  height 100%
  width 180px
  position relative
.leftbox
  height 100%
  overflow-x hidden
  overflow-y auto
  width 180px
  box-sizing border-box
.leftbox::-webkit-scrollbar-track-piece
  background-color rgba(0, 0, 0, 0)
  border-left 1px solid rgba(0, 0, 0, 0)
.leftbox::-webkit-scrollbar
  width 4px
  height 8px
  border-radius 4px
.leftbox::-webkit-scrollbar-thumb
  background-color rgba(0, 0, 0, 0.1)
  background-clip padding-box
  border-radius 4px
  min-height 10px
.leftbox::-webkit-scrollbar-thumb:hover
  background-color rgba(0, 0, 0, 0.2)
  border-radius 4px
</style>
